<template>
  <view class="pagelist">
    <block v-for="item in list" :key="item.id">
      <view class="card" @click="() => handleItem(item)">
        <!-- 队长头像 -->
        <image class="image" mode="aspectFill" :src="item.header_icon" />
        <!-- 队伍名称、备注 -->
        <view class="middle m-top-10">
          <view class="ellipsis-1">{{ item.title }}</view>
          <view class="ellipsis-2">备注：{{ item.remark }}</view>
        </view>
        <!-- 组别，报名人数 -->
        <view class="right text m-top-10">
          <view>{{ item.group_name }}</view>
          <view>{{ `${item?.sign_min_num || 0}/${item?.sign_max_num || 0}人` }}</view>
        </view>
        <!-- 举报按钮 -->
        <view class="report-btn" @click.stop="() => handleReport(item)">
          <image class="report-icon" src="@/static/images/point/report.png" mode="aspectFit" />
        </view>
      </view>
    </block>
  </view>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';

// 定义接口
type Team = {
  id: number;
  bg_img: string;
  title: string;
  header_name: string;
  group_name: string;
  sign_min_num: number;
  sign_max_num: number;
  sign_start_time: string;
  sign_end_time: string;
  remark: string;
  header_icon: string;
  sign_team_id: number | string;
};
defineProps({
  list: {
    type: Array as PropType<Team[]>,
    default: () => [],
  },
  bgUrl: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: '#ffffff',
  },
});

// 定义方法
const emit = defineEmits(['itemclick']);

const handleItem = (item: any) => {
  if ((item?.sign_min_num || 0) == (item?.sign_max_num || 0)) {
    uni.showModal({
      title: '提示',
      content: '报名人数已满！',
      showCancel: false,
    });
    return;
  }
  emit('itemclick', item);
};

// 举报处理
const handleReport = (item: any) => {
  uni.navigateTo({
    url: `/pages/report/bad-words?type=invalid_name&source_id=${item.sign_team_id}`,
  });
};
</script>

<style lang="scss" scoped>
.pagelist {
  background: $backColor;

  .card {
    &:not(:last-of-type) {
      margin-bottom: 20rpx;
    }
    position: relative;
    background: white;
    padding: 20rpx;
    display: flex;
    gap: 20rpx;
    box-sizing: border-box;
    .middle {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
    }
    .image {
      width: 100%;
      border-radius: 20rpx;
      width: 150rpx;
      height: 150rpx;
      background: #f3f3f3;
    }
    .right {
      width: 100rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .text {
      font-weight: bold;
    }
    .report-btn {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      .report-icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>
